<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轨道交通知识问答</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }
        .container {
            background-color: #fff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #0066cc;
            text-align: center;
            margin-bottom: 30px;
        }
        .question-container {
            margin-bottom: 20px;
        }
        .question-text {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .options-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }
        .option-btn {
            padding: 12px 15px;
            background-color: #e6f2ff;
            border: 2px solid #bbdefb;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
            color: #0066cc;
        }
        .option-btn:hover {
            background-color: #d2e6ff;
        }
        .option-btn.selected {
            background-color: #0066cc;
            color: white;
            border-color: #0066cc;
        }
        .option-btn.correct {
            background-color: #4caf50;
            color: white;
            border-color: #4caf50;
        }
        .option-btn.wrong {
            background-color: #f44336;
            color: white;
            border-color: #f44336;
        }
        .feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 6px;
            font-weight: bold;
        }
        .feedback.correct {
            background-color: rgba(76, 175, 80, 0.2);
            color: #2e7d32;
        }
        .feedback.wrong {
            background-color: rgba(244, 67, 54, 0.2);
            color: #c62828;
        }
        .progress-container {
            margin-top: 25px;
            text-align: center;
            font-size: 16px;
        }
        .next-btn {
            display: block;
            margin: 25px auto 0;
            padding: 12px 30px;
            background-color: #0066cc;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .next-btn:hover {
            background-color: #004d99;
        }
        .next-btn:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .timer {
            text-align: center;
            font-size: 18px;
            margin-bottom: 20px;
            color: #666;
        }
        .result-message {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            margin: 20px 0;
            padding: 15px;
            border-radius: 6px;
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>轨道交通知识问答</h1>
        <div class="timer" id="timer">剩余时间: 00:00</div>
        <div class="question-container" id="question-container">
            <div class="question-text" id="question-text"></div>
            <div class="options-container" id="options-container"></div>
        </div>
        <div class="feedback" id="feedback" class="hidden"></div>
        <div class="progress-container">
            题目: <span id="current-question">1</span>/<span id="total-questions">100</span>
        </div>
        <button class="next-btn" id="next-btn">下一题</button>
    </div>

    <script src="data.js"></script>

    <script>
        // 从JSON文件加载题目
        let questions = [];
        let currentQuestionIndex = 0;
        let score = 0;
        let selectedOption = null;
        let timeLeft = 600; // 10分钟倒计时
        let timerInterval = null;
        let allQuestionsLoaded = false;

        // 页面元素引用
        const questionText = document.getElementById('question-text');
        const optionsContainer = document.getElementById('options-container');
        const feedbackElement = document.getElementById('feedback');
        const currentQuestionElement = document.getElementById('current-question');
        const totalQuestionsElement = document.getElementById('total-questions');
        const nextBtn = document.getElementById('next-btn');
        const timerElement = document.getElementById('timer');
        const questionContainer = document.getElementById('question-container');

        // 加载JSON文件
        async function loadQuestions() {
            try {
                // 这里直接使用提供的JSON数据字符串
                const data = jsonData;
                
                // 过滤掉无效的题目（如缺少选项或正确答案）
                questions = data.filter(q => q && q.options && q.correct_answer);
                
                // 随机排序题目并取前100题
                shuffleArray(questions);
                questions = questions.slice(0, 100);
                allQuestionsLoaded = true;
                
                if (questions.length === 0) {
                    questionContainer.innerHTML = '<div class="result-message">没有可用的题目</div>';
                    return;
                }

                totalQuestionsElement.textContent = questions.length;
                showQuestion(0);
                startTimer();
            } catch (error) {
                console.error('加载题目失败:', error);
                questionContainer.innerHTML = '<div class="result-message">加载题目失败，请刷新页面重试</div>';
            }
        }

        // 显示题目
        function showQuestion(index) {
            if (index >= questions.length) {
                showFinalResults();
                return;
            }

            const question = questions[index];
            questionText.textContent = `${index + 1}. ${question.text}`;
            currentQuestionElement.textContent = index + 1;
            
            // 清空选项容器
            optionsContainer.innerHTML = '';
            
            // 创建选项按钮
            question.options.forEach(option => {
                const optionBtn = document.createElement('button');
                optionBtn.classList.add('option-btn');
                optionBtn.textContent = `${option.label}${option.text}`;
                optionBtn.dataset.value = option.label;
                optionBtn.addEventListener('click', () => selectOption(optionBtn, question.correct_answer));
                optionsContainer.appendChild(optionBtn);
            });
            
            // 重置选中状态和反馈
            selectedOption = null;
            feedbackElement.textContent = '';
            feedbackElement.className = 'feedback hidden';
            nextBtn.disabled = true;
        }

        // 选项选择处理
        function selectOption(optionBtn, correctAnswer) {
            if (selectedOption !== null) return;
            
            selectedOption = optionBtn;
            
            // 标记选中状态
            optionBtn.classList.add('selected');
            
            // 检查是否正确
            const userAnswer = optionBtn.dataset.value.slice(0, 1); // 取选项标签部分
            const isCorrect = userAnswer === correctAnswer;
            
            // 显示反馈
            if (isCorrect) {
                optionBtn.classList.add('correct');
                feedbackElement.textContent = '恭喜！你的回答是正确的！';
                feedbackElement.className = 'feedback correct';
                score++;
            } else {
                optionBtn.classList.add('wrong');
                
                // 标记正确答案
                const options = document.querySelectorAll('.option-btn');
                options.forEach(opt => {
                    if (opt.dataset.value.slice(0, 1) === correctAnswer) {
                        opt.classList.add('correct');
                    }
                });
                
                feedbackElement.textContent = `很遗憾，正确答案是：${correctAnswer}。`;
                feedbackElement.className = 'feedback wrong';
            }
            
            nextBtn.disabled = false;
        }

        // 下一题按钮点击事件
        nextBtn.addEventListener('click', () => {
            currentQuestionIndex++;
            showQuestion(currentQuestionIndex);
        });

        // 启动计时器
        function startTimer() {
            timerInterval = setInterval(() => {
                const minutes = Math.floor(timeLeft / 60);
                const seconds = timeLeft % 60;
                timerElement.textContent = `剩余时间: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                
                timeLeft--;
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    showFinalResults();
                }
            }, 1000);
        }

        // 显示最终结果
        function showFinalResults() {
            clearInterval(timerInterval);
            
            questionContainer.innerHTML = `
                <div class="result-message">
                    <p>测试结束！</p>
                    <p>你的得分: ${score}/${questions.length}</p>
                    <p>正确率: ${(score / questions.length * 100).toFixed(2)}%</p>
                </div>
            `;
        }

        // 数组随机排序辅助函数
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        // 页面加载完成后加载题目
        window.addEventListener('load', loadQuestions);
    </script>
</body>
</html>